<!--  todo...  -->
<template>
  <div class="common-micro-wrap">
    <!-- ! 页面内展示微应用 -->
    <template v-for="(appMenu, index) of loadedAppMenu" :key="index">
<!--      <MicroApps-->
<!--        v-show="appMenu.appName == currentAppName"-->
<!--        :show="appMenu.appName == currentAppName"-->
<!--        :microName="appMenu.appName"-->
<!--        :loadPage="appMenu.routePage"-->
<!--        :component="appMenu.routeName"-->
<!--        :showComponent="appMenu.showComponent"-->
<!--      />-->
    </template>
  </div>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  watch,
  toRaw,
  ref,
  nextTick,
} from "vue";
import request from "../../common/utils/request";
import store from "../../store/index";
import { useRoute, useRouter } from "vue-router";
import utils from "../../common/utils/utils";
import { Modal, notification, message } from "ant-design-vue";
import { WechatOutlined } from "@ant-design/icons-vue";

export default defineComponent({
  name: "CommonMicro",
  components: {  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },

  setup(props, context) {
    const route = useRoute();
    const router = useRouter();
    const state = reactive({
      currentAppName: '',
      loadedAppMenu: [],
    });

    const init = () => {};

    init();

    watch(
      () => store.getters.microSendMessage,
      (val) => {
        console.log(val);
        if (val && val.appName) {
          const index = state.loadedAppMenu.findIndex(
            (it) => it.appName == val.appName
          );
          let item = {
            appName: val.appName,
            routePage: val.routePage,
            routeName: val.routeName,
            showComponent: val.showComponent,
          };
          if (index !== -1 ) {
            state.loadedAppMenu[index] = item;
          } else {
            state.loadedAppMenu.push(item);
          }
          state.currentAppName = val.appName;
        } else if (val && val.type === 'delete') {
          state.currentAppName = '';
          state.loadedAppMenu = state.loadedAppMenu.filter((v) => v.appName !== val.deleteApp);
        } else {
          state.currentAppName = '';
          state.loadedAppMenu = [];
        }
      }
    );

    return {
      ...toRefs(state),
    };
  },
});
</script>

<style lang="less" scoped>
.common-micro-wrap {
  width: 0;
  height: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}
</style>
